<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="header.html">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/header.css">
    <title>列表页</title>
    <style>
        
        iframe{
            display: block;
            width: 100%;
            height: 183px;
        }
        .buy a{cursor: pointer;}
        .main{position: relative;}
        .main em{position: absolute;right: 90px;top: 46px;height: 20px;width: 95px;z-index: -1;}
        .main em img{width: 20px;height: 20px;float: left;}
        .main em span{float: right;height: 20px;border-radius: 50%; width: 20px; text-align: center;font-size: 14px;}
        .fenlei ul{
            width: 1012px;
            margin: 0 auto;
            box-sizing: border-box;
        }
        .fenlei ul li{
            width: 19%;
            height: 284px;
            border: 1px solid #999;
            float: left;
            margin-left: 8px;
            margin-bottom: 12px;
        }
        .fenlei ul li .photo img{width: 100%;cursor: pointer;}
        .introduce{
            line-height: 22px;
            margin: 3px 10px;
            color: #333;
            font-size: 14px;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .danjia{
            font-size: 20px;
            margin-left: 20px;
            margin-top: 20px;
            font-weight: 700;
            color: rgb(180, 0,0);
        }
        .fenlei ul li span img{width: 30px;height: 30px;cursor: pointer; margin-right: 20px;margin-top: 15px;}
        #template{display: none;}
    </style>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>考拉欢迎你！</li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>手机考拉</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <img src="../image/logo.png" alt="" class="l">
            <div class="checks l">
               
                <h1>
                    <input type="text" class="sou" placeholder="搜索一下">
                    <p class="r tu"></p>
                </h1>
            </div>
            <div class="buy r">
                <a href="#">购物车</a>   
            </div>
            <em><img src="../image/xiaocheche.png" alt=""><span></span></em>
        </div>
    </section>
    <footer>
        <div class="foot">
            <h2 class="l">所有分类</h2>
            <ul class="l">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">海外直购</a>
                </li>
                <li>
                    <a href="">品质奶粉</a>

                </li>
                <li>
                    <a href="">人气面膜</a>
                </li>
                <li>
                    <a href="">充值</a>
                </li>
            </ul>
        </div>
    </footer>
    <div class="fenlei">
        <ul>
            <li id="template">
                <div class="photo"></div>
                <h5 class="introduce"></h5>
                <h6 class="danjia l"></h6>
                <span></span>
            </li>
        </ul>
    </div>
    <iframe scrolling="no" src="footer.html" frameborder="0"></iframe>
    <script src="../js/jquery.min.js"></script>
    <script>
        console.log($("#template"))
        $.ajax({
            url:`http://127.0.0.1:82/index`,
            success(data){
                data = JSON.parse(data);
                // console.log(data);
                data.forEach(item => {
                    // let at = $("li .danjia").length - 1;
                    let newLi = $("#template").clone(true);
                    newLi.attr("id","")
                    newLi.find(".danjia").html(`￥${item.pirce}元`);
                    newLi.find(".photo").html(`<img src="../image/details${item.dephoto}.jpg">`);
                    newLi.find(".introduce").html(item.introduce);
                    newLi.find("span").html(`<img class="r" src="../image/xiaocheche.png">`)
                    $(".fenlei ul").append(newLi)

                });
            }
        })
        $(".fenlei ul li .photo").click(function(){  
            let shu = $(this).find("img").attr("src");
            let shuo = shu.split("/");
            let pirce = $(this).find(".danjia").html();
            let jie = $(this).find(".introduce").html();
            location.href = `http://127.0.0.1:82/html/detail.html?ad=${shuo[2]}`;
        })

       
            //没有获取到元素，所以事件没加上
            $(".buy a").click(function(){
                location.href = "http://127.0.0.1:82/html/shopping.html"
            })
            $(".sign ul li:nth-child(2)").click(function(){
                location.href = `http://127.0.0.1:82/html/signin.html`
            })
            $(".sign ul li:nth-child(3)").click(function(){
                location.href = `http://127.0.0.1:82/html/signin.html`
            })
            
            $(".fenlei ul li span").click(function(){
                let count = Number($("em span").html());
                $("em span").html(count + 1).css("border","1px solid red");

            })
    </script>
</body>
</html>
<!-- 
    省略号

    来源'http://127.0.0.1：82'已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头
        这样的问题一般是出在路径上，请求不到数据
 -->